<template>
  <div class="horizontal">
    <div
      class="component"
      v-for="(component, index) in horizontal"
      :key="component"
    >
      <component :is="component" :index="index"></component>
    </div>
  </div>
</template>

<script setup name="horizontal">
import { getCurrentInstance } from 'vue'
import ToDoList from './module/toDoList.vue'
import Notice from './module/notice'
const { proxy } = getCurrentInstance()
const router = useRouter()

const props = defineProps({
  horizontal: {
    type: Array,
    default: () => [ToDoList, Notice]
  }
})
watch(
  () => props.horizontal,
  val => {
    console.log(val, 'props.horizontal')
  },
  { deep: true }
)

const emit = defineEmits(['update:horizontal'])
</script>

<style scoped lang="scss">
.horizontal {
  width: 65%; //calc(100% - 484px);
  margin-top: 20px;
  margin-right: 20px;
  .component {
    min-height: 420px;
    margin-bottom: 20px;
    :deep(.el-table) {
      margin: 0 !important;
      // box-shadow: 0px 1px 3px 1px rgb(201, 197, 197);
      // border-bottom-left-radius: 10px;
      // border-bottom-right-radius: 10px;
      height: 360px;
    }
  }
  .addView {
    @apply flex justify-center items-center text-25px;
    height: 200px !important;
    cursor: pointer;
    border: 1px solid rgb(216, 207, 207);
  }
}
</style>
